<template>
  <div>
    <folded-panel open>
      <el-form label-width="100px" size="mini">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="search.start_time"
                :picker-options="pickerOptions"
                placeholder="选择日期时间"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="严重程度">
              <el-select v-model="search.severity_id">
                <el-option
                  v-for="(item, index) in severityList"
                  :key="index"
                  :label="item.name"
                  popper-class="w100"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item v-permission="['super']" label="组织">
              <el-select v-model="search.org_id" filterable>
                <el-option
                  v-for="(item, index) in company"
                  :key="index"
                  :label="item.name"
                  popper-class="w100"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button @click="handleClick">
            <i
              class="el-icon-search"
              style="height: 0.8rem; margin-right:2px;"
            ></i
            >查询检测事件</el-button
          >
        </el-form-item>
      </el-form>
    </folded-panel>
    <!-- size="mini" 删去-->
    <el-table
      class="mt10"
      :data="tableData"
      :header-cell-style="{ background: '#f5f5f5' }"
      size="mini"
    >
      <!--      <el-table-column label="选择" prop="" width="60">-->
      <!--        <template slot-scope="scope">-->
      <!--          &lt;!&ndash;          {{ scope.row.agent_code }}&ndash;&gt;-->
      <!--          <el-radio-->
      <!--            v-model="tableSelect"-->
      <!--            :label="scope.row.agent_code"-->
      <!--            style="margin-left: 10px;"-->
      <!--            @change="getTemplateRow(scope.row.agent_code)"-->
      <!--          >-->
      <!--            &nbsp;-->
      <!--          </el-radio>-->
      <!--        </template>-->
      <!--      </el-table-column>-->

      <el-table-column label="检测时间" prop="time" sortable />
      <el-table-column label="终端名" prop="agent_name" sortable />
      <el-table-column label="终端识别码" prop="agent_code" sortable />
      <el-table-column label="严重程度" prop="severity" sortable />
      <el-table-column label="战术" prop="tactic" sortable />
      <el-table-column label="技术" prop="technique" sortable />
      <el-table-column label="检测名" prop="detect_name" sortable />
      <el-table-column label="操作" prop="">
        <template slot-scope="scope">
          <el-button class="f12" type="text" @click="handleDetail(scope)"
            >详细信息</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="mt10 el-row--flex is-justify-end">
      <!-- small 删去-->
      <!-- :page-sizes="[100, 200, 300, 400]" -->
      <el-pagination
        background
        :current-page="page"
        layout="total, prev, pager, next"
        :page-size="limit"
        :page-sizes="[100, 200, 300, 400]"
        :total="count"
        @current-change="handleCurrentChangePage"
      />
    </div>
  </div>
</template>

<script>
import FoldedPanel from "@/components/foldedPanel";
import org_getall from "@/utils/mixin/org_getall";
import event from "@/api/event";
import rule from "@/api/rule";
import checkSelectTable from "@/utils/mixin/checkSelectTable";
import radioTable from "@/utils/mixin/radioTable";
import { mapGetters } from "vuex";
export default {
  name: "Event",
  components: { FoldedPanel },
  mixins: [org_getall, checkSelectTable, radioTable],
  data: () => {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "7 天前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          },
          {
            text: "30 天前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", date);
            }
          },
          {
            text: "90 天前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      value1: "",
      search: {
        severity_id: "",
        start_time: "",
        org_id: ""
      },
      status: [],
      company: [],
      tableData: [],
      severityList: [],
      limit: 20,
      page: 1,
      count: 0
    };
  },
  computed: mapGetters(["UserInfo"]),
  mounted() {
    this.onLoad();
    if (this.UserInfo.org_id) this.search.org_id = this.UserInfo.org_id;
  },
  methods: {
    handleDetail({ row: { meql_ext } }) {
      let query = Object.assign({}, meql_ext);
      delete query.limit;
      delete query.page;
      delete query.org_id;
      let route = this.$router.resolve({
        name: "Investigation_EventHunter",
        query: {
          ...query
        }
      });
      window.open(route.href, "_blank");
    },
    async onLoad() {
      await this.loadingOrgGetall();
      this.severityList = await rule
        .severity()
        .then(res => {
          res.data.severity.unshift({
            id: 0,
            name: "低危及以上"
          });
          return res.data.severity;
        })
        .catch(() => {
          return [
            {
              id: 0,
              name: "低危及以上"
            }
          ];
        });
      this.getData();
    },
    async getData() {
      let tempDate = new Date();
      tempDate.setDate(tempDate.getDate() - 30);
      let searchData = {
        severity_id: this.search.severity_id || 0,
        start_time:
          this.search.start_time || tempDate.Format("yyyy-MM-dd hh:mm:ss"),
        org_id: this.search.org_id || 0
      };
      let { count, result } = await event
        .list({
          page: this.page,
          limit: this.limit,
          ...searchData
        })
        .then(res => {
          res.data.result = res.data.result.map(k => {
            k.time = new Date(k.time).Format("yyyy-MM-dd hh:mm:ss");
            return k;
          });
          return res.data;
        });
      this.count = count;
      this.tableData = result;
    },
    handleClick() {
      this.page = 1;
      this.getData();
    },
    handleCurrentChangePage(val) {
      this.page = val;
      this.getData();
    }
  }
};
</script>

<style scoped></style>
